<script setup lang="ts">
  import useDialogStore from '@/store/modules/dialog'
  import { CSSProperties, computed } from 'vue'

  const props = defineProps<{
    loading?: boolean
    loadingText?: string
  }>()

  const hDialogLoadingStyle = computed<CSSProperties>(() => {
    let zIndex = useDialogStore().getZIndex
    return {
      zIndex: ++zIndex,
    }
  })
</script>

<template>
  <div class="h_dialog_loading" v-if="props.loading" :style="hDialogLoadingStyle">
    <i class="iconfont icon-refresh_2"></i>
    <div class="h_dialog_loading_text">
      {{ props.loadingText || '' }}
    </div>
  </div>
</template>

<style scoped lang="scss">
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .h_dialog_loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #fff, $alpha: 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;

    .h_dialog_loading_text {
      font-size: 14px;
      color: $primaryColor;
    }

    .iconfont {
      font-size: 24px;
      color: $primaryColor;
      animation: spin 1s linear infinite;
    }
  }
</style>
